<template>
  <div class="outerBooking">
    <el-button
      class="bookingBtn"
      type="primary"
      style="margin-top: 20px"
      @click="submitBook"
    >
      提交您的最新预约
    </el-button>
    <div class="bookingInfoBox">
      <el-descriptions
        class="remindBox"
        direction="vertical"
        title="预约信息最新提示"
        border 
      >
        <el-descriptions-item label="您目前预约所选择的区域是">
          {{this.bookingInfo[0].Location}}
        </el-descriptions-item>
      </el-descriptions>
      <br>
      <div class="imgBox"> 
        <!-- <img :src="this.bookingInfo[0].qrCode" alt=""> -->
        <img :src="'data:image/jpeg;base64,'+this.newQrCode" alt="二维码未返回"> 
        <div class="img-tip">您的核酸检测二维码</div>
      </div>
    </div>
  </div>
  
</template>

<script>
import {
  userBooking,
  userQRcode
} from '@/api/booking/bookingInfo';
import {
  getInfo
} from '@/api/Info/getInfo';
export default {
  data() {
    return {
      bookingInfo: [
        {
          Location: '',
          testLocation: 1,
          qrCode: ''
        }
      ],
      newQrCode: "",
    }
  },
  created () {
    this.$store.dispatch('region/getAllInfo', 0).then((regionData) => {
      userQRcode().then((data) => {
        this.bookingInfo = data;
        this.newQrCode = this.bookingInfo[0].qrCode.replace(/\s*/g,''); 
        const obj = regionData.filter(d => d.regionId === this.bookingInfo[0].testLocation)[0];
        this.bookingInfo[0].Location = obj.province + obj.city + obj.area + obj.testLocation;
      });
    });
  },
  methods: {
    submitBook () {
      getInfo().then((data1) => {
        if (!data1.defaultRegion) {
          this.$message.error('您并未选择检测区域')
        } else {
          userBooking().then((data) => {
              this.$message.success('申请成功');
          });
        }
      });
    }
  }
}
</script>

<style lang="scss">
.outerBooking {
  position: relative;
  text-align: center;
  
}

.remindBox {
  width: 60%;
  display: inline-block;
  position: relative;
}

.bookingInfoBox {
  margin-top: 30px;
}

.imgBox {
  margin-top: 30px;
  margin-bottom: 30px;
  display: inline-block;
  position: relative;
  border: solid 3px gray;
  box-shadow: 1px 1px 2px 2px rgb(0 0 0 / 20%);
}

.imgBox:hover .img-tip {
  display: block;
}

.img-tip {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  background: #000;
  color: #fff;
  opacity: 0.6;
  display: none;
}

</style>
